<template>
	<view>
		<view >
			<!-- 动态表单校验 -->
			<uni-forms class="form" ref="form" :model="dynamicFormData" label-position="top">
				<uni-forms-item class="form-item" :label="(currentItem+1)+'.'+currentItemObj.adlXmName" :label-width="350"
					 :rules="[{'required': true,errorMessage: '请选择'}]" :name="['items',index]" >
					<view class="form-item">
						<uni-data-checkbox  v-model="dynamicFormData.items[currentItem]" :localdata="currentItemObj.adlXmList" mode="list" :wrap="true" @change="changeCheck" disabled></uni-data-checkbox>
					</view>
					
					<view>
						<view class="groupTitle"><text>现场视频</text></view>
						<view class="actionGroup">
							<view class="actionItem" v-if="currentItemObj.fjs.length !== 0">
								<!-- <uni-icons class="deleteImg" type="clear" size="30" @click="deleteVideo()"></uni-icons> -->
								<video id="myVideo" :src="currentItemObj.fjs[0].url" 
								        @error="videoErrorCallback" controls></video>
							</view>
							<view class="actionItem" v-if="currentItemObj.fjs.length === 0">
								<uni-icons type="videocam" size="100"></uni-icons>
							</view>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="actionButtonGroup">
				<button class="actionButton" @click="lastItem" v-if="currentItem != 0">上一题</button>
				<button class="actionButton" @click="nextItem" v-if="currentItem != dynamicLists.length-1" :disabled="showNextBtn">下一题</button>
				<button class="actionButton" @click="nextItem" v-if="currentItem == dynamicLists.length-1" :disabled="showNextBtn">返回</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	
	import { StorageUtil } from '@/storage/StorageUtil'
	import { route,routeMixin } from "@/route/Route"
	import { applyFormService } from "@/service/ApplyFormService"
	import { assessService } from '@/service/AssessService'
	import { localStoreService } from "@/service/LocalStoreService"
	export default {
		mixins: [routeMixin],
		data() {
			return {
				currentItem:0,
				currentItemObj:{
					fjs:[]
				},
				dynamicFormData: {
					items: [],
					adlPcId: undefined
				},
				dynamicLists: [],
				dynamicRules: {
				},
				showNextBtn:true,
				zpAdlValues: [],
				pgAdlValues: [],
				bisZhsqAdlPc: ""
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "ADL量表"
			});
			
			
		},
		methods: {
			routeParameterEvent(data) {
				this.routeParameter = data
				this.bisZhsqAdlPc = data.bisZhsqAdlPc
				console.log(data)
				
				applyFormService.adlXmxxTree({adlPcId: data.bisZhsqAdlPc},(res)=>{
					this.dynamicFormData.adlPcId = res.adlPcId
					this.dynamicLists = res.adlData
					for(let index in this.dynamicLists){
						for(let subItem of this.dynamicLists[index].adlXmList){
							subItem.value = subItem.adlXmxxId
							subItem.text = subItem.adlXmxxName+"("+subItem.adlXmxxFs+"分)"
						}
						this.dynamicLists[index].fjs=[]
						this.dynamicFormData.items[index] = undefined
					}
					
					uni.setNavigationBarTitle({
						title: "ADL量表"+"（共"+this.dynamicLists.length+"题）"
					});
					
					this.setCheckValue(0)
				})
				assessService.findById({id:data.bisZhsqId},(res)=>{
					this.routeParameter.items = res.adlZhsqs
					
					// this.dynamicFormData.items = data.items
					for(let checkValue of this.routeParameter.items){
						if(checkValue.bisUserId !== data.bisUserId){
							this.pgAdlValues.push(checkValue)
						}
					}
					
					this.setCheckValue(0)
				})
			},
			setCheckValue(index){
				if(this.dynamicLists.length !== 0 && this.zpAdlValues !== undefined){
					this.currentItemObj = this.dynamicLists[index]
					for(let xmItem of this.currentItemObj.adlXmList){
						for(let value of this.pgAdlValues){
							if(xmItem.adlXmxxId === value.adlXmxxId){
								this.dynamicFormData.items[index] = value.adlXmxxId
								this.currentItemObj.bisAdlZhsqId = value.bisAdlZhsqId
								if(value.fjs.length !== 0){
									this.currentItemObj.fjs = [{id:value.fjs[0].id,url:value.fjs[0].path}]
								}else{
									this.currentItemObj.fjs = []
								}
								break;
							}
						}
						if(!this.dynamicFormData.items[index]){
							for(let value of this.zpAdlValues){
								if(xmItem.adlXmxxId === value){
									this.dynamicFormData.items[index] = value
									break;
								}
							}
								
						}
					}
				}
				this.changeCheck()
			},
			changeCheck(){
				this.showNextBtn = !(this.dynamicFormData.items[this.currentItem] !== undefined)
			},
			lastItem(){
				
				this.currentItem--
				this.setCheckValue(this.currentItem)
			},
			nextItem(){
				// applyFormService.saveAdl(
				// 	{bisAdlZhsqId:this.dynamicLists[this.currentItem].bisAdlZhsqId || "",zhsq:{bisZhsqId:this.routeParameter.bisZhsqId},adlXmxxId:this.dynamicFormData.items[this.currentItem]},
				// 	{ids:this.dynamicLists[this.currentItem].fjs[0].id},
				// 	(res)=>{
				// 		console.log(this.currentItem,res)
						
				// 		if(this.dynamicLists.length-1 === this.currentItem){
				// 			// this.sendRouteParameter('audit',1,this.dynamicFormData)
				// 			route.goBack()
				// 			return
				// 		}
				// 		this.dynamicLists[this.currentItem].bisAdlZhsqId = res.bisAdlZhsqId
				// 		this.currentItem++
				// 		this.setCheckValue(this.currentItem)
				// })
				if(this.dynamicLists.length-1 === this.currentItem){
					// this.sendRouteParameter('audit',1,this.dynamicFormData)
					route.goBack()
					return
				}
				this.currentItem++
				this.setCheckValue(this.currentItem)
			},
			deleteVideo(){
				this.dynamicLists[this.currentItem].fjs = []
			},
			selectVideo(){
				const _this = this
				uni.chooseVideo({
					success: function(chooseImageRes) {
						console.log(chooseImageRes)
						uni.uploadFile({
							url: process.env.VUE_APP_TICK_HTTP__BASE_PATH + '/api/minio/mp/uploadVideo', 
							filePath: chooseImageRes.tempFilePath,
							name: 'file',
							formData: {
								fjlb: 'adlLiveVideo'
							},
							header:{
								Authorization: StorageUtil.getStorage(StorageUtil.TOKEN)
							},
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data)
								
								_this.dynamicLists[_this.currentItem].fjs = [res.data]
								console.log(_this.currentItem,_this.dynamicLists[_this.currentItem].fjs)
								
							}
						});
					}
				});
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.form{
		margin-top: 20rpx;
	}
	.uni-forms-item{
		padding: 40rpx;
	}
	.form-item{
		font-weight: 800;
	}	
	.uni-data-checklist{
		font-weight: 500;
	}
		
	.checklist-group{
		display: flex;
		flex-direction: column;
	}
	.actionButtonGroup{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: -webkit-fill-available
	}
	.actionButton{
		width: 280rpx;
		// margin: 20rpx;
		background-color: $uni-primary;
		color: $uni-white;
	}
	.root {
		display: flex;
		flex-direction: column;
	}
	
	.groupTitle {
		height: 80rpx;
		background-color: $uni-bg-color-grey;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
		font-size: 36rpx;
		font-weight: 700;
	}
	
	.actionTitle {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
		font-size: 28rpx;
	}
	
	.actionGroup {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;    
		padding: 20px;
		height: 461rpx;
	}
	
	.actionItem {
		// width: 200rpx;
		margin: 10rpx;
		border: 4rpx $uni-bg-color-grey solid;
		position: relative;
	}
	.deleteImg{
		color: red !important;
		font-size: 60rpx !important;	
		position: absolute;
		z-index: 9;
		right: -30rpx;
		top: -30rpx;
	}
</style>
